<template>
  <div class="w750" :class="orderArr.length ? '' : 'white-bg' ">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="暂无更多"
        @load="onLoad"
        :immediate-check="false"
        v-if="orderArr && orderArr.length"
      >
        <div class="order-list" :class="themes.theme">
          <div class="list-item" v-for="(item,index) in orderArr" :key="index">
            <div class="item-tit">
              <span class="order-num">
                订单号：<em class="num">{{item.orderSn}}</em>
              </span>
              <span class="order-state" v-if="item.orderStatus == 0">
                <span class="sta cur">待发货</span>
              </span>
              <span class="order-state" v-if="item.orderStatus == 1">
                <span class="sta cur">待收货</span>
              </span>
              <span class="order-state" v-if="item.orderStatus == 2">
                <span class="sta">已完成</span>
              </span>
              <span class="order-state" v-if="item.orderStatus == 3">
                <span class="sta">已取消</span>
              </span>
            </div>
            <div class="pro-mes" @click="toPointOrderDetail(item.orderSn)">
              <div class="pro-img">
                <img :src="$imgUrlHead + item.orderItemDtos[0].prodPic" alt>
              </div>
              <div class="pro-name">
                <span class="name">{{item.orderItemDtos[0].prodName}}</span>
                <span class="price" :style="{'color': themes.color}">
                  <em class="now" :style="{'color': themes.color}">{{item.orderItemDtos[0].exchangeIntegral}}</em> 积分
                </span>
              </div>
              <div class="pro-num">×{{item.orderItemDtos[0].basketCount}}</div>
            </div>
            <div class="total">
              <div class="left" style="color: #999;">{{ item.addTime | dateformat('YYYY-MM-DD')}}</div>
              <div class="right">
                <span class="total-price">
                  积分合计：<span class="price" :style="{'color': themes.color}"><em class="now" :style="{'color': themes.color}">{{item.integralTotal}}</em></span>
                </span>
              </div>
            </div>
            <div class="item-btn" v-if="item.orderStatus == 0">
              <span class="btn" @click="cancelOrder(item.orderSn)">取消订单</span>
            </div>
            <div class="item-btn" v-if="item.orderStatus == 1">
              <span class="btn" @click="checkLogistical(item.orderSn)">查看物流</span>
              <span class="btn cur" @click="confirmGoods(item.orderSn)">确认收货</span>
            </div>
            <!-- <div class="item-btn" v-if="item.orderStatus == 2">
              <span class="btn" @click="deleteOrder(item.orderSn)">删除订单</span>
            </div> -->
            <div class="item-btn" v-if="item.orderStatus == 3">
              <span class="btn" @click="deleteOrder(item.orderSn)">删除订单</span>
            </div>
          </div>
        </div>
      </van-list>

      <Noempty :pic="require('../../assets/images/order-empty.png')" :title="'您没有相关订单'" v-if="Nomsg"/>
    </van-pull-refresh>
  </div>
</template>

<script>
import Noempty from "components/Noempty/Noempty";
import {mapState} from 'vuex'
import { integralOrderList, integralOrderCancel, integralOrderDel, integralOrderReceive } from "api/pointsApi";
export default {
  data() {
    return {
      themes: applyStyle(),
      orderArr: [],
      page: 1,
      isLoading: false,
      subNumber: "", //订单编号
      loading: false,
      finished: false,
      Nomsg: false,
      total: null
    };
  },
  mounted() {
    this.getorderList(1, false);
    let that = this

  },
  methods: {
    //获取订单列表数据
    getorderList(curPageNO = 1, isAppend = true) {
      integralOrderList({
        curPageNO: curPageNO
      })
        .then(res => {
          if (res.status == 1) {
            //设置total
            this.setTotal(res.result.total);

            if (res.result.resultList) {
              if (!isAppend) {
                this.orderArr = res.result.resultList;
              } else {
                for (let i = 0; i < res.result.resultList.length; i++) {
                  this.orderArr.push(res.result.resultList[i]);
                }
              }
            } else {
              this.Nomsg = true;
            }
          } else {
            this.$toast(res.msg);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //加载更多
    onLoad() {
      let curPageNO = 1;
      setTimeout(() => {
        if (this.isMore()) {
          //如果还有更多
          this.page ++;
          this.getorderList(this.page);
          return;
        }
        //说明加载完毕, 到底了
        this.loading = false;
        this.finished = true;
      }, 500);
    },
    //设置setTotal
    setTotal(total) {
      this.total = total;
      if (total == 0) {
        this.Nomsg = true;
      }
    },
    //判断是否有更多
    isMore() {
      if (this.orderArr.length >= this.total) {
        return false;
      } else {
        return true;
      }
    },
    //确认收货
    confirmGoods(subNumber) {
      let that = this
      this.subNumber = subNumber;
      this.$dialog
        .confirm({
          title: "确认收货",
          message: "您确定要收货?PS:请务必要收到货后在执行此操作!"
        })
        .then(() => {
          // on confirm
          integralOrderReceive({
            orderSn: this.subNumber
          }).then(res => {
            if (res.status == 1) {
              this.$toast("收货成功!");
              setTimeout(() => {
                this.refreshPage();
              }, 1000);
            } else {
              this.$toast(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //取消订单
    cancelOrder(subNumber) {
      let that = this
      this.subNumber = subNumber;
      this.$dialog.confirm({
        title: "取消订单",
        message: "你确定要取消改订单"
      })
        .then(() => {
          integralOrderCancel({
            orderSn: this.subNumber
          }).then(res => {
            if (res.status == 1) {
              this.$toast("取消订单成功");
              setTimeout( ()=> {
                this.refreshPage()
              }, 1000);
            } else {
              this.$toast(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //删除订单
    deleteOrder(subNumber) {
      let that = this;
      this.subNumber = subNumber;
      this.$dialog
        .confirm({
          title: "删除订单",
          message: "你确定要删除改订单"
        })
        .then(() => {
          // on confirm
          integralOrderDel({
            orderSn: this.subNumber
          }).then(res => {
            if (res.status == 1) {
              this.$toast("删除订单成功");
              setTimeout(() => {
                this.refreshPage();
              }, 1000);
            } else {
              this.$toast(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    refreshPage() {
        this.orderArr = []
        this.page = 1
        this.finished = false;
        this.getorderList(1,false)
    },
    //查看物流
    checkLogistical(orderSn) {
      this.$router.push({
        path: `/logistics`,
        query: {
          orderSn: orderSn
        }
      });
    },
    onRefresh() {
      this.Nomsg = false;
      setTimeout(() => {
        this.refreshPage();
        this.$toast("刷新成功");
        this.isLoading = false;
        // this.count++;
      }, 500);
    },
    //查看积分订单详情
    toPointOrderDetail(orderSn) {
       this.$router.push({
        path: `/pointOrderDetail`,
        query: {
          orderSn: orderSn
        }
      });
    },
  },
  computed: {
    ...mapState(['themes']),
  },
  components: {
    Noempty
  }
};
</script>

<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/order.css" scoped></style>
